<template>
  <view>
    <view class="wrapper">
      <view v-for="item in state.pagination.data" :key="item.id" class="pro-box" @tap="onDetail()">
        <view class="epro-box-t">
          <view class="epro-box-t-1">主理人：{{ item.owner_user.nickname }}</view>
          <view class="epro-box-t-2">
            <image :src="sheep.$url.cdn(item.image)"></image>
            <view>
              <view>{{ item.name }}</view>
              <view class="epro-box-t-2-tag">{{ item.weigh }}</view>
            </view>
          </view>
        </view>
        <view class="epro-box-b">
          {{ item.description }}
        </view>
      </view>
    </view>
    <view>
      <s-empty
        v-if="state.pagination.total==0"
        text="这里是空的哦~"
        icon="/static/empty.png"
      />
    </view>
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onMounted, reactive } from 'vue';
  import _ from 'lodash';

  onMounted(async () => {
    getData();
  });
  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 0,
      last_page: 1,
    },
    loadStatus: '',
  });

  async function getData(page = 1, list_rows = 10) {
    state.loadStatus = 'loading';
    let res = await sheep.$api.brand.collectionBrand({
      list_rows,
      page,
    });
    if (res.code === 1) {
      let orderList = _.concat(state.pagination.data, res.data.data);
      // state.pagination = {
      //   ...res.data,
      //   data: orderList,
      // };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getData(state.pagination.current_page + 1);
    }
  }

  function onDetail(e) {
    sheep.$router.go('/pages/brand/list');
  }
</script>

<style lang="scss" scoped>
  @mixin flex($align-item: center, $justify-content: space-between) {
    display: flex;
    align-items: $align-item;
    justify-content: $justify-content;
  }

  .wrapper {
    padding: 0 30rpx;
  }

  .pro-box {
    border-radius: 20rpx;
    margin-bottom: 22rpx;
    background: #1E1E1E;

    .epro-box-t {
      padding: 20rpx 30rpx;

      .epro-box-t-1 {

        font-weight: 300;
        font-size: 22rpx;
        color: #918676;
      }

      .epro-box-t-2 {
        @include flex(center, none);

        font-weight: 400;
        font-size: 34rpx;
        color: #F9EBBE;
        margin: 40rpx 0 30rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .epro-box-t-2-tag {
          width: 84rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          background: #1E3E37;
          border-radius: 4rpx;

          font-weight: 300;
          font-size: 18rpx;
          color: #3ECED3;
          margin-top: 15rpx;
        }
      }
    }

    .epro-box-b {
      border-top: 1px solid #353535;
      padding: 30rpx;

      font-weight: 300;
      font-size: 24rpx;
      color: #BABABA;
    }
  }
</style>
